<template>
  <div class="layout-all">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item prop="account" label="账号:">
        <el-input v-model="form.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item prop="nickname" label="昵称:">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item prop="pwd" label="登录密码:">
        <el-input v-model="form.pwd" show-password placeholder="请输入登录密码" />
      </el-form-item>
      <el-form-item prop="pay_pwd" label="支付密码:">
        <el-input v-model="form.pay_pwd" show-password placeholder="请输入支付密码" />
      </el-form-item>
      <el-form-item prop="headimgurl" label="头像地址:">
        <el-upload
          class="avatar-uploader"
          :action="upload_url"
          :show-file-list="false"
          list-type="picture-card"
          :on-success="handle_headimgurl"
        >
          <img v-if="headimgurl" :src="headimgurl" class="avatar">
          <i v-else class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item prop="idcard" label="身份证号:">
        <el-input v-model="form.idcard" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item prop="realname" label="真实姓名:">
        <el-input v-model="form.realname" placeholder="请输入真实姓名" />
      </el-form-item>
      <el-form-item prop="sex" label="性别:">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option
            v-for="item in sex_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="balance" label="账户余额:">
        <el-input v-model="form.balance" placeholder="请输入账户余额" />
      </el-form-item>
      <el-form-item prop="point" label="积分余额:">
        <el-input v-model="form.point" placeholder="请输入积分余额" />
      </el-form-item>

      <el-form-item prop="status" label="是否启用:">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-close" circle @click="bk()" />
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="onSubmit('form')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      upload_url: '',
      headimgurl: '',
      sex_options: [
        { value: '0', label: '未知' },
        { value: '1', label: '男' },
        { value: '2', label: '女' }
      ],
      form: {
        id: 1,
        status: 1,
        openid: '',
        unionid: '',
        account: '',
        nickname: '',
        headimgurl: '',
        pwd: '',
        pay_pwd: '',
        salt: '',
        sex: 1,
        balance: '',
        point: 0,
        idcard: '',
        realname: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ],
        pay_pwd: [
          { required: true, message: '请输入支付密码', trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        balance: [
          { required: true, message: '请输入账户余额', trigger: 'blur' }
        ],
        point: [
          { required: true, message: '请输入积分余额', trigger: 'blur' }
        ],
        headimgurl: [{}]
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.init_into()
    this.upload_url = process.env.VUE_APP_BASE_API + '/pub/Upload/upload'
  },
  methods: {
    onSubmit(formName) {
      const form = this.form
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.status === true ? form.status = 1 : form.status = 0
          console.log(form)
          this.get('/admin/User/save', form, 'POST').then(e => {})
          this.$router.back()
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },
    handle_headimgurl(res, file) {
      this.headimgurl = file.response.data.path
      this.form.headimgurl = file.response.data.path
    },
    // 限制图片大小格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    bk() {
      this.$router.back()
    },
    init_into() {
      this.get('/admin/User/info?id=' + this.id, this.form, 'POST').then(e => {
        const tpl = e.info.tpl
        tpl.status === 1 || tpl.status === '' ? this.form.status = true : this.form.status = false
        this.form.openid = tpl.openid
        this.form.unionid = tpl.unionid
        this.form.account = tpl.account
        this.form.nickname = tpl.nickname
        // 图片加载
        this.form.headimgurl = tpl.headimgurl
        this.headimgurl = tpl.headimgurl
        this.form.pwd = tpl.pwd
        this.form.pay_pwd = tpl.pay_pwd
        this.form.salt = tpl.salt
        this.form.sex = tpl.sex
        this.form.balance = tpl.balance
        this.form.point = tpl.point
        this.form.idcard = tpl.idcard
        this.form.realname = tpl.realname
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
